<template>
  <div class="films">
    <div class="films__top">
      <router-link to="/films/nowPlaying">正在热映</router-link>
      <router-link to="/films/comingSoon">即将上映</router-link>
    </div>
    <div class="films__body">
      <!-- 这里会被填充，要么是 FilmsA.vue  FilmsB.vue -->
      <router-view />
    </div>
  </div>
</template>

<style scoped>
.films {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.films__body {
  flex: 1;
  background-color: green;
}
</style>
